<template>
  <div>
    <el-button type="primary" size="mini" @click="dialogVisible = true">
      <i class="el-icon-edit"></i>
    </el-button>
    <el-dialog title="修改帖子" :visible.sync="dialogVisible" width="40%" :close-on-click-modal="false">
      <el-form ref="form" :model="form">
        <el-form-item label="类型">
          <el-radio-group v-model="form.type" size="mini">
            <el-radio :label="0" border>丢了东西</el-radio>
            <el-radio :label="1" border>捡到东西</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="物品">
          <el-select v-model="form.itemTypeId" :value="form.itemTypeName" placeholder="请选择物品类型">
            <el-option v-for="item in itemTypeList" :label="item.type" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="标题">
          <div class="input-box">
            <el-input v-model="form.title" placeholder="校园卡掉了(请尽量精简,具体内容放在详情里)"></el-input>
          </div>
        </el-form-item>

        <el-form-item label="图片">
          <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-change="handleChange"
            :on-remove="handleRemove" :file-list="fileList" accept="image/jpg,image/jpeg,image/png">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="详情">
          <div class="input-box">
            <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 10 }" v-model="form.detail" placeholder="学号：2020112323
姓名：张三
找到请喝奶茶，救救孩子！
(发帖时不用填QQ，系统会自动填写，带图更容易找到，如果物品带有学号或姓名，请务必填写，以便搜索。)">
            </el-input>
          </div>
        </el-form-item>

        <el-form-item label="地点">
          <div style="display: flex; align-items: center">
            <el-input v-model="post.address" placeholder="选填" style="margin-right: 10px"></el-input>
            <MapButton @getAddressInfo="getAddressInfo"></MapButton>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="edit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getItemTypeList } from "@/api/post/itemType";
import { upLoadFile } from "@/api/file/file";
import { getDetailInfoByPostId, updatePost } from "@/api/post/post";
import MapButton from "@/components/MapButton.vue";

export default {
  name: "EditPost",
  components: { MapButton },
  inject: ['reload'],
  props: {
    postId: Number
  },
  data() {
    return {
      dialogVisible: false,
      post: {},
      itemTypeList: [],
      imgUrlList: [],
      form: {},
      fileList: []
    }
  },
  methods: {
    uploadImg(file) {
      let formData = new FormData()
      formData.set("file", file.raw)
      upLoadFile(formData).then(res => {
        if (res.data.code === 200) {
          this.fileList.push({ url: res.data.imgUrl })
          this.imgUrlList.push(res.data.imgUrl)
          this.$message.success(res.data.message)
        } else {
          // this.$message.error(res.data.message)
        }
      })
    },
    handleChange(file, fileList) {
      this.uploadImg(file)
    },
    handleRemove(file, fileList) {
      this.deleteFile(file.uid)
    },
    deleteFile(uid) {
      const index = this.fileList.findIndex(item => item.uid === uid)
      this.fileList.splice(index, 1)
      this.imgUrlList.splice(index, 1)
    },
    getItemTypeList() {
      getItemTypeList().then(res => {
        if (res.data.code === 200) {
          this.itemTypeList = res.data.itemTypeInfoList
        } else {
          // this.$message.error(res.data.message)
        }
      })
    },
    getPostInfo() {
      getDetailInfoByPostId({
        postId: this.postId
      }).then(res => {
        if (res.data.code === 200) {
          this.post = res.data.postDetailInfoVO
          this.form = this.post
          if (this.post.postImageList !== null) {
            this.post.postImageList.forEach(item => {
              this.fileList.push({ url: item.imgUrl })
              this.imgUrlList.push(item.imgUrl)
            })
          }
        } else {
          // this.$message.error(res.data.message)
        }
      })
    },
    getAddressInfo(info) {
      this.form.address = info.title
      this.form.latitude = info.point.lat
      this.form.longitude = info.point.lng
    },
    edit() {
      this.$set(this.form, "fromUserId", this.form.fromUser.id)
      this.$set(this.form, "imgUrlList", this.imgUrlList)
      console.log(this.itemTypeList[this.form.itemTypeId - 1].type)
      updatePost({
        "id": this.form.id,
        "type": this.form.type,
        "itemTypeId": this.form.itemTypeId,
        "itemTypeName": this.itemTypeList[this.form.itemTypeId - 1].type,
        "title": this.form.title,
        "detail": this.form.detail,
        "address": this.form.address,
        "fromUserId": this.form.fromUserId,
        "imgUrlList": this.form.imgUrlList,
        "latitude": 0,
        "longitude": 0,
      }).then(res => {
        if (res.data.code === 200) {
          setTimeout(() => {
            this.reload()
          }, 3000)
          this.dialogVisible = false
          this.$message.success(res.data.message)
        } else {
          // this.$message.error(res.data.message)
        }
      })
    }
  },
  created() {
    this.getItemTypeList()
    this.getPostInfo()
  }
}
</script>

<style lang="scss" scoped>
.input-box {
  display: flex;
  align-items: center
}
</style>
